<template>
  <div>
    <div  class="flex_column">
      <!--header-->
      <div id="header" class="flex_column">
        <!--header_up-->
        <div id="header_up">
          <span class="side"></span>
          <span class="colorful">{{glrGisTitle}}</span>
          <span class="side small color_lightblue">
                	  <a @click="handleLogout">退出</a>&nbsp;&nbsp;
                    <a @click="goAdmin">跳转到后台</a>
          </span>
        </div>
        <!--header_down-->
        <div id="header_down" class="flex_row">
          <!--设备总数-->
          <div id="exp" class="down_side flex-column">
            <div class="box color_blue middle">设备总数统计</div>
            <div class="box">
              <span class="color_green big">{{all_equipment}}</span>
              <span class="color_blue middle">台</span>
            </div>
          </div>
          <!--title-->
          <ul id="title" class="down_center flex_row">
            <li  class="dcenter_side">
              <span class="text_item color_blue middle">节约电量&nbsp;</span>
              <span class="text_value color_green middle">{{day_economy_electricity}}&nbsp;</span>
              <span class="text_units color_blue small">KWH</span>
            </li>
            <li  class="dcenter_side">
              <span class="text_item color_blue middle">用电统计</span>
              <span class="text_value color_green middle">{{sum_economy_electricity}}&nbsp;</span>
              <span class="text_units color_blue small">KWH</span>
            </li>
            <li  class="dcenter_side">
              <span class="text_item color_blue middle">平均功率&nbsp;</span>
              <span class="text_value color_green middle">{{power_avg}}&nbsp;</span>
              <span class="text_units color_blue small">W</span>
            </li>
          </ul>
          <!--设备贡献值-->
          <div id="cont" class="down_side flex_column">
            <div class="cont_up color_blue small">社会贡献值</div>
            <ul class="cont_down flex_row" id="cont_show">
              <li class="cont_box flex_column">
                <img class="box_pic" src="@/assets/gisMap/pic/cloud.png">
                <div class="box_text small">
                  <span class="text_value color_green small">{{(day_economy_electricity*0.96/1000).toFixed(2)}}&nbsp;</span>
                  <span class="text_unit color_blue">吨</span>
                </div>
                <span class="box_text color_blue small">CO2减排量</span>
              </li>

              <li class="cont_box flex_column">
                <img class="box_pic" src="@/assets/gisMap/pic/energy.png">
                <div class="box_text small">
                  <span class="text_value color_green small">{{(day_economy_electricity*0.12).toFixed(2)}}&nbsp;</span>
                  <span class="text_unit color_blue">吨</span>
                </div>
                <span class="box_text color_blue small">节约煤炭量</span>
              </li>

              <li class="cont_box flex_column">
                <img class="box_pic" src="@/assets/gisMap/pic/tree.png">
                <div class="box_text small">
                  <span class="text_value color_green small">{{(day_economy_electricity*0.35).toFixed(2)}}&nbsp;</span>
                  <span class="text_unit color_blue">吨</span>
                </div>
                <span class="box_text color_blue small">减少森林砍伐</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--center-->
      <div id="center" >

        <!--引入百度地图-->
        <baidu-map
          ak="lhedb05t3bGeKtrCfYbpweXr"
          class="map"
          :scroll-wheel-zoom="true"
          :center="baidumapcenter"
          :zoom="zoom"
          @ready="map_handler"
        >
          <bm-control anchor="BMAP_ANCHOR_TOP_LEFT">

            <a-select placeholder="请选择项目" style="width: 200px" :value="projectListValue" @change="projectListChange" >
              <a-select-option value="">请选择项目</a-select-option>
              <a-select-option v-for="item in projectList" :key="item.id" :value="item.code">
                {{item.name}}
              </a-select-option>
            </a-select>

          </bm-control>


          <div
            v-for="(marker, i) of markers"
            :key="i">
            <bm-marker
              :dragging="false"
              :icon="{url: marker.url, size: { width: 30, height: 50 }}"
              :position="{lng: marker.lng, lat: marker.lat}"
              @click="infoWindowOpen($event,marker.id)"
            >
              <bm-label
                :content="marker.lightPole.code"
                :offset="{width:-8,height:-18}"
                :position="{lng: marker.lng, lat: marker.lat}"
                :labelStyle="{border:'1px solid #6ea4cd', padding:'2px',fontWeight: '200',fontSize:'8px',cursor: 'pointer'}"
                :title="marker.lightPole.code"
                @click="infoWindowOpen($event,marker.id)"
              />
              <div v-for="(item,index) in marker.listDevices" :key="index+'light'">
                <!-- <bm-label v-if="item.show" content="" :labelStyle="item.labelStyle" :offset="item.offset"/>-->
                <bm-label  content="" :labelStyle="{backgroundColor:item.backgroundColor, width:'5px',height:'5px', border:'none',borderRadius:'5px'}" :offset="{width:'-5',height:5+index*5}"/>
              </div>

              <div v-for="(item,index) in marker.listDeviceGateWays" :key="index">
                <bm-label  content="" :labelStyle="{width:0, height:0, border:'10px solid transparent', borderBottomColor:'red', borderTop:0,backgroundColor:'transparent'}" :offset="{width:'10',height:'5'}"/>
              </div>
            </bm-marker>
          </div>


        </baidu-map>
        <!--      <div id="warn_box" class=" flex_row">
                <div class="tity_box ">
                  <span class="green_box"></span>
                  <span class="tiny">&nbsp;正常</span>
                  <span class="tiny">(10)</span>
                </div>
                <div class="tity_box ">
                  <span class="red_box"></span>
                  <span class="tiny">&nbsp;异常</span>
                  <span class="tiny">(20)</span>
                </div>
                <div class="tity_box ">
                  <span class="grey_box"></span>
                  <span class="tiny">&nbsp;中断</span>
                  <span class="tiny">(5)</span>
                </div>
              </div>-->

        <!--带箭头方框的展示与隐藏-->
        <div id="arrow_box">
          <div class="arrow"></div>
          <div class="tab_content color_blue">
            <div id="exp_detail" class="tab_box flex_column">
              <span class="color_green">设备名称：&nbsp;exp_name</span>
              <span>&nbsp;日用电量：&nbsp;exp_dvalue</span>
              <span>&nbsp;总用电量：&nbsp;exp_tvalue</span>
              <span>&nbsp;功率：&nbsp;exp_power</span>
              <span>&nbsp;设备状态：&nbsp;exp_status</span>
            </div>

            <div id="sensor_detail" class="tab_box flex_column">
              <span class="color_green">传感器名称：&nbsp;sensor_name</span>
              <span>&nbsp;日功率：&nbsp;sensor_dvalue</span>
              <span>&nbsp;总功率：&nbsp;sensor_tvalue</span>
              <span>&nbsp;设备状态：&nbsp;sensor_status</span>
            </div>

            <div id="camera_detail" class="tab_box flex_column">
              <span class="color_green">摄像头名称：&nbsp;camera_name</span>
              <span>&nbsp;日功率：&nbsp;camera_dvalue</span>
              <span>&nbsp;总功率：&nbsp;camera_tvalue</span>
              <span>&nbsp;设备状态：&nbsp;camera_status</span>
            </div>
          </div>
        </div>
      </div>
      <!--bottom-->
      <ul id="bottom" class="flex_row">
        <!--用电统计-->
        <li class="bottom_box flex_column">
          <div class="bottom_title flex_row">
            <div class="title_box color_blue normal">用电量统计</div>
            <div class="title_box ">
              <span class="color_green tiny">日用电量&nbsp;</span>
            </div>
          </div>
          <div class="bottom_content" id="day_electricity_chart">
          </div>
        </li>
        <!--设备统计-->
        <li class="bottom_box flex_column">
          <div class="bottom_title flex_row">
            <div class="title_box color_blue normal">设备统计</div>
            <div class="title_box ">
              <span class="color_green tiny">&nbsp;</span>
            </div>
          </div>
          <div class="bottom_content flex_column" >
            <div id="sensor_title" class="flex_row small" >
              <span class="sensor_box" >设备类型</span>
              <span class="sensor_box" >数量</span>
            </div>
            <div id="sensor_list" >
              <ul class="inner-container" >
                <li  class="flex_row small" v-if="ledcount>0" >
                  <span class="sensor_box">LED屏</span>
                  <span class="sensor_box">{{ledcount}}台</span>
                </li>
                <li  class="flex_row small" v-if="radiocount>0">
                  <span class="sensor_box">音柱</span>
                  <span class="sensor_box">{{radiocount}}个</span>
                </li>
                <li  class="flex_row small"  v-if="videocount>0">
                  <span class="sensor_box">摄像头</span>
                  <span class="sensor_box">{{videocount}}个</span>
                </li>

                <li  class="flex_row small"  v-if="sensorcount>0" >
                  <span class="sensor_box">传感器</span>
                  <span class="sensor_box">{{sensorcount}}个</span>
                </li>

                <li  class="flex_row small"  v-if="ligth_count>0">
                  <span class="sensor_box">路灯</span>
                  <span class="sensor_box">{{ligth_count}}个</span>
                </li>

              </ul>
            </div>
          </div>
        </li>
        <!--环境监测-->
        <li class="bottom_box flex_column">
          <div class="bottom_title flex_row">
            <div class="title_box color_blue normal">环境信息</div>
            <div class="title_box ">
              <span class="color_green tiny">&nbsp;</span>
            </div>
          </div>
          <div class="bottom_content" id="environment">
          </div>
        </li>
        <!--功率信息-->
        <li class="bottom_box flex_column">
          <div class="bottom_title flex_row">
            <div class="title_box color_blue normal">功率报表</div>
            <div class="title_box ">
              <span class="color_green tiny">功率&nbsp;</span>
            </div>
          </div>
          <div class="bottom_content" id="power_avg_chart">
          </div>
        </li>
      </ul>
    </div>

    <GlrDeviceShow ref="glrDeviceShow"></GlrDeviceShow>
  </div>
</template>
<script>
  import {httpAction} from '@/api/manage'
  import { GlrGisJS } from '@/mixins/GlrGisJS'
  import {USER_INFO_DEPT} from "@/store/mutation-types"
  import {GLR_ADDRESS_INFO} from "@/store/mutation-types"
  import Vue from 'vue'
  import { mapActions } from "vuex"
  import {
    BaiduMap,
    BmMarker,
    BmInfoWindow,
    BmMapType,
    BmlMarkerClusterer,
    BmControl,
    BmLabel,

  } from 'vue-baidu-map'
  import GlrDeviceShow from "./GlrDeviceShow";
  export default {
    name: 'GlrGis',
    mixins:[GlrGisJS],
    components: {
      GlrDeviceShow,
      BaiduMap,
      BmlMarkerClusterer,
      BmMarker,
      BmInfoWindow,
      BmMapType,
      BmControl,
      BmLabel,
    },
    data() {
      return {
        glrGisTitle:'格利尔智慧云平台',
        isShow:true,
        ledcount:0,
        styleWidth:'{width:1px;}',
        sensorcount:0,
        radiocount:0,
        ligth_count:0,
        videocount:0,
        glrSensorData:{},
        sensor_list: [],
        title_list: [],
        cont_list: [],
        projectList:[],
        projectListValue:'',
        project:{},
        BMap: {},
        map: {},
        markers: [],
        baidumapcenter: {},
        zoom: 18,
        curShow:0,
        mapStyle: {
          styleJson: [
            {
              "featureType": "all",
              "elementType": "geometry",
              "stylers": {
                "hue": "#007fff",
                "saturation": 89
              }
            },
            {
              "featureType": "water",
              "elementType": "all",
              "stylers": {
                "color": "#ffffff"
              }
            }
          ]
        },
        firstValue: "",
        show: false,
        url: {
          getMainData: "/glr/glrHomeController/getMainData",
        },
        all_equipment:0,
        day_economy_electricity:0,
        sum_economy_electricity:0,
        power_avg:0,
        dateList:[],
        electricityList:[],
        avg_powerList:[],
        radioList:[],
        videoList:[],
        sensorWayList:[],
        gateWayList:[],
        lightList:[],
        ledList:[],
        glrLightPole:{},
        imgBase64:'',
        lng:'',
        lat:'',
        url: {
          getLightPoleList: "/glr/glrLightPole/getLightPoleList",
          getLightPoleDevice: "/glr/glrLightPole/getLightPoleDevice",
          getMainData: "/glr/glrHomeController/getMainData",
          getLedImgByCode: "/glr/glrLed/getLedImgByCode",
          getProjectList: "/glr/glrProject/getProject",
        },
      }
    },
    computed:{
    },
    created() {
      var that=this;
      httpAction(that.url.getProjectList,{},"post").then((res)=>{
        if(res.success){
          that.projectList=res.result;

        }else{
          that.$message.warning(res.message);
        }
      }).finally(() => {
        that.confirmLoading = false;
      })
      this.resetPage();
    },
    mounted() {
      var that=this;
      httpAction(that.url.getMainData,{},"get").then((res) => {
        if (res.success) {
          that.all_equipment=res.result.all_count;
          that.day_economy_electricity=res.result.day_economy_electricity;
          that.sum_economy_electricity=res.result.power_sum;
          that.power_avg=res.result.power_avg;
          that.dateList=res.result.dateList;
          that.electricityList=res.result.electricityList;
          that.avg_powerList=res.result.avg_powerList;
          that.ledcount=res.result.ledcount;
          that.videocount=res.result.videocount;
          that.sensorcount=res.result.sensorcount;
          that.radiocount=res.result.radiocount;
          that.ligth_count=res.result.ligth_count;
          that.glrSensorData=res.result.glrSensorData;
          that.ringChart('environment',that.glrSensorData);
          that.pillarChart('day_electricity_chart',that.dateList,that.electricityList);
          that.lineChartN('power_avg_chart',that.dateList,that.avg_powerList);
        } else {
          that.$message.warning(res.message);
        }
      }).finally(() => {
        that.sliderstatus=false;
        that.loading = false;
      });
      this.getLightPoleList();
    },
    methods: {
        resetPage(){
            var that=this;
            setTimeout(function(){
                that.$router.go(0);    //刷新页面
            },1000*60*30);   //这就是 一分钟
        },
      projectListChange(e) {
        const that = this;
        that.projectListValue=e;
        that.project={};
        for(var j = 0;j < that.projectList.length; j++){
          var lightPoleTemp=that.projectList[j];
          if (that.projectListValue==lightPoleTemp.code){
            that.project=that.projectList[j];
            break;
          }
        }
        var that_baidumapcenter={};
        var arr = Object.keys(that.project);
        if (arr.length>0){
          that_baidumapcenter={lng: parseFloat(that.project.longitude), lat: parseFloat(that.project.latitude)};
        }else{
          if (that.lng){
            that_baidumapcenter={lng: that.lng, lat: that.lat};
          }else{
            that_baidumapcenter={lng: GLR_ADDRESS_INFO.longitude, lat: GLR_ADDRESS_INFO.latitude};
          }
        }
        const point = new that.BMap.Point(that_baidumapcenter.lng, that_baidumapcenter.lat)
        //that.map.panTo(point)
        that.map.centerAndZoom(point, 18);
      },
      curShowValue(value){
        this.curShow=value;
      },
      infoWindowOpen(event,id){
        this.$refs.glrDeviceShow.show(id);
      },
      map_handler({BMap, map}) {
        this.BMap = BMap;
        this.map = map;
        map.addControl(new BMap.MapTypeControl({
          mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
          ]}));
        map.centerAndZoom(new BMap.Point(this.lng, this.lat, 18));
        map.setMapType(BMAP_HYBRID_MAP);
      },
      getLightPoleList(){
        var that=this;
        httpAction(that.url.getLightPoleList,{projectCode:''},"post").then((res)=>{
          if(res.success){
            that.lightPoleList=res.result;
            that.lightPole={};
            if (that.lightPoleList.length>0){
              that.lng=that.lightPoleList[0].longitude;
              that.lat=that.lightPoleList[0].latitude;
            }
            that.mapViewAllLightPole(that.lng,that.lat);
          }else{
            that.$message.warning(res.message);
          }
        }).finally(() => {
          that.confirmLoading = false;
        })
      },
      mapViewAllLightPole(){
        const that = this;
        var  markTemp=[];
        that.markers=[];
        if (that.lightPoleList.length>0){
          that.lightPole=that.lightPoleList[0];
          for(var j = 0;j < that.lightPoleList.length; j++){
            var  url=null
            if (that.lightPoleList[j].lightPoleType=='1'){
              url=require("@/assets/gisMap/pic/putong.png");
            }
            if (that.lightPoleList[j].lightPoleType=='2'){
              url=require("@/assets/gisMap/pic/zhihui.png");
            }
            if (that.lightPoleList[j].lightPoleType=='3'){
              url=require("@/assets/gisMap/pic/hegan.png");
            }
            const position = { id:that.lightPoleList[j].id, lng: that.lightPoleList[j].longitude, lat: that.lightPoleList[j].latitude, url: url, showFlag: false,lightPole:that.lightPoleList[j] }
            var listDevices=[];
            var listDeviceGateWays=[];
            if (position.lightPole.radioYn=='Y'){
              listDevices.push({num:'1',show:true ,backgroundColor:'red'})
            }
            if (position.lightPole.ledYn=='Y'){
              listDevices.push({num:'2',show:true ,backgroundColor:'yellow'})
            }
            if (position.lightPole.lightYn=='Y'){
              listDevices.push({num:'3',show:true ,backgroundColor:'blue'})
            }
            if (position.lightPole.gatewayYn=='Y'){
              listDeviceGateWays.push({num:'4',show:true ,backgroundColor:'green'})
            }
            if (position.lightPole.sensorYn=='Y'){
              listDevices.push({num:'5',show:true ,backgroundColor:'white'})
            }
            if (position.lightPole.videoYn=='Y'){
              listDevices.push({num:'6',show:true ,backgroundColor:'orange'})
            }

            position.listDevices=listDevices;
            position.listDeviceGateWays=listDeviceGateWays;

            markTemp.push(position);
          }
        }

        //that.markers=markTemp;
        setTimeout(() => {
          that.markers=markTemp;
          console.log("==that.markers.push(position)==")
        }, 500);

        that.lng=that.lightPoleList[0].longitude;
        that.lat=that.lightPoleList[0].latitude;
        that.baidumapcenter={lng: that.lng, lat: that.lat};

        //that.center={lng: that.lightPole.longitude, lat: that.lightPole.latitude};
        //   const point = new that.BMap.Point(that.center.lng, that.center.lat)
        //   that.map.panTo(point)
      },
      goAdmin(){
        this.$router.push({ path: "/dashboard/analysis" });
      },
      ...mapActions(["Logout"]),
      handleLogout() {
        const that = this;
        this.$confirm({
          title: '提示',
          content: '真的要注销登录吗 ?',
          onOk() {
            return that.Logout({}).then(() => {
              window.location.href="/";
              //window.location.reload()
            }).catch(err => {
              that.$message.error({
                title: '错误',
                description: err.message
              })
            })
          },
          onCancel() {
          },
        });
      },

    },




  }
</script>
<style scoped>
  .map {
    width:95.4%;
    height:87%;
    overflow:hidden;
  }

  /deep/ .BMap_cpyCtrl {
    display: none !important;
  }

  /deep/ .anchorBL {
    display: none !important;
  }
</style>

<style scoped>


  .flex_column{
    /*color: #0ac1c7;
    font-size:0.8rem;*/

    width:100%;
    height:100vh;
    background-size:cover;


  }
  ul{
    padding: 0;
  }
  .color_lightblue{
    color:#376f84;
  }
  .color_blue{
    color:#65c6e7;
  }

  .color_green{
    color:#04ba19;
  }
  .tiny{
    font-size:0.5rem;
  }

  .small{
    font-size:0.9rem;
  }
  .normal{
    font-size:1rem;
  }
  .middle{

    font-size:1.2rem;}

  .big{
    font-size:2.0rem;
  }
  .bold{
    font-weight:bold;}

  .colorful{

    width: 25%;
    font-size: 2.2rem;
    font-family: Sans-serif;
    background-image:
      -webkit-gradient( linear, left top, right top,
      color-stop(0, #03b3ff),
      color-stop(0.5, #00c8fc),
      color-stop(1, #0064fd) );
    color: transparent;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -ms-background-clip: text;
    font-weight:bold;

  }

  .italic{
    font-style:italic
  }
  /*flex布局*/
  .flex{
    display: -webkit-flex;
    display: flex;
  }
  .flex_row{
    display: -webkit-flex;
    display: flex;
    flex-direction: row ;
    justify-content:center;
    align-items:center;

  }
  .flex_column{
    display: -webkit-flex;
    display: flex;
    flex-direction: column ;
    justify-content:center;
    align-items:center;

  }

  #app{
    width:100%;
    height:100vh;

  }
  /*header部分*/
  #header{
    width:100%;
    height:15vh;
    display:flex;
    align-items:center;
    justify-content:center;

  }
  /*center部分*/
  #center{
    width:100%;
    height:56vh;
    background:url('../../assets/gisMap/pic/center_bg.png') no-repeat;
    background-repeat:no-repeat;
    background-size:100% 100%;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;

  }
  /*bottom部分*/
  #bottom{
    width:96%;
    height:25vh;
    display:flex;
    justify-content:space-between;
  }
  /*header_up部分*/
  #header_up{
    height:60%;
    width:100%;
    background:url('../../assets/gisMap/pic/header_up.png') no-repeat;
    background-size:100% 100%;
    text-align:center;
    display:flex;
    vertical-align:middle;
    justify-content:space-between;
    align-items:center;
    margin-top: -18px;
  }
  /*标题两侧*/
  #header_up .side{

    height:100%;
    width:10%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding-bottom:1%;
    cursor:pointer;
  }
  /*标题下方*/
  #header_down{
    width:96%;
    height:40%;
    display:flex;
    align-items: flex-end;
    margin-top:0.2%;
  }
  /*设备总数*/
  #header_down #exp{

    width:25%;
    height:150%;
    background:url('../../assets/gisMap/pic/left_bg.png') no-repeat;
    background-size:100% 100%;
    justify-content: flex-start ;
    align-items:center;
    alignContent:flex-start;
    /*align-self:flex-end;*/
  }
  #exp .box{
    width:100%;
    height:50%;
    display:flex;
    padding-left:15%;
    justify-content:flex-start;
    align-items:center;
  }
  /*标题下方--中间部分*/

  #header_down .down_center{

    width:50%;
    height:100%;
    background:url('../../assets/gisMap/pic/header_down.png') no-repeat;
    background-size:100% 100%;
    background-position:bottom;
  }
  /*标题下方--两侧部分*/
  #header_down .down_center .dcenter_side{
    width:33%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    vertical-align:bottom;
  }

  #header_down .down_center .dcenter_side:first-child
  {
    justify-content:flex-end;

  }
  #header_down .down_center .dcenter_side:last-child
  {
    justify-content:flex-start;
  }


  /*设备贡献值*/
  #header_down #cont{
    width:25%;
    height:160%;
    background:url('../../assets/gisMap/pic/right_bg.png') no-repeat;
    background-size:100% 80%;
    background-position:center top;
    background-repeat:no-repeat;
  }

  /*设备贡献值标题*/
  #cont .cont_up{
    text-align:right;
    padding-right:10%;
    width:80%;
    height:25%;
  }
  /*设备贡献值标题--下方*/
  #cont .cont_down{
    width:100%;
    height:70%;
  }
  /*设备贡献值标题--下方三列*/
  .cont_down .cont_box{
    width:30%;
    height:100%;
    display:flex;
    justify-content:flex-start;
    align-items:center;

  }

  .cont_box .box_pic{
    margin-top:5%;
    height:40%;
    width:auto;

  }

  .cont_box .box_text{
    height:35%;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding-bottom:3%;

  }



  /*引入百度地图*/
  #allmap{
    width:95.4%;
    height:87%;
    overflow:hidden;


  }
  /*warn_box*/
  #warn_box{
    position:absolute;
    top:10%;
    left:3%;
    height:7%;
    width:18%;
    background:url('../../assets/gisMap/pic/warn_box.png') no-repeat;
    background-repeat:no-repeat;
    background-size:99.9% 99.9%;
    display:flex;
    justify-content:space-around;
    align-items:center;

  }

  #warn_box .tity_box{
    width:30%;
    height:100%;

    display:flex;
    align-items:center;
    padding-left:5%;
    color:#65c6e7;
  }


  .red_box{
    height:10px;
    width:10px;

    border-radius:5px;
    background-color:red;

  }

  .blue_box{
    height:10px;
    width:10px;

    border-radius:5px;
    background-color:blue;

  }

  .grey_box{
    height:10px;
    width:10px;

    border-radius:5px;
    background-color:grey;

  }
  /*提醒框---带箭头*/
  #arrow_box{
    color:#aab2c4;
    display: inline-block;
    height: 170px;
    width: 310px;
    text-align: center;
    border-radius: 5px;
    margin-left: 32px;
    vertical-align: top;
    background-color: #234478;
    position:absolute;
    opacity:0.8;
    text-align:left;
    visibility:hidden;

  }
  .arrow {
    width: 0px;
    height: 0px;

    border-bottom:10px solid transparent;
    border-top:10px solid #234478;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    position:absolute;
    margin-left:90px;
    margin-top:170px;


  }
  /*详细信息*/
  #arrow_box .tab_content{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top:0.1%;
    padding-left:1%;
    padding-right:1%;

    font-size:0.1rem;
    line-height:1rem;

  }
  .tab_content .tab_box{
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
    margin-bottom:1.5%;
    width:49%;
  }

  .lamp_pic{
    position:absolute;
    width:1%;
    height:4%;
    left:48%;
    top:70%;
    cursor:pointer;
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;

  }

  .lamp_pic ul li{
    list-style:none;

  }
  .lamp_pic img{
    width:40%;
    height:90%;

    margin-left:10%;

  }
  #lamp_pic  .lamp_logo{
    width:40%;
    height:100%;


  }
  /*图标部分*/
  .lamp_logo .red_logo{
    width:100%;
    height:18%;
    background-color:red;

  }

  .lamp_logo .green_logo{
    width:100%;
    height:18%;
    background-color:green;
  }

  .lamp_logo .blue_logo{
    width:100%;
    height:18%;
    background-color:blue;
  }

  .lamp_logo .yellow_logo{
    width:100%;
    height:18%;
    background-color:yellow;
  }

  .lamp_logo .orange_logo{
    width:100%;
    height:18%;
    background-color:orange;
  }

  .lamp_logo .purple_logo{
    width:100%;
    height:18%;
    background-color:purple;
  }



  /*bottom部分下面的bottom_box*/
  #bottom .bottom_box{
    width:24%;
    height:100%;

  }

  /*bottom_title*/
  #bottom .bottom_box .bottom_title{
    width:100%;
    height:23%;
    background:url('../../assets/gisMap/pic/bottom_title.png') no-repeat;
    background-size:100% 100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  /*bottom_title*/
  #bottom .bottom_box .bottom_title .title_box{
    width:30%;
    height:100%;
    display:flex;
    align-items:center;
    padding-left:5%;
  }
  /*bottom_content*/
  #bottom .bottom_box .bottom_content{
    width:100%;
    height:95%;
    bottom:0;
    overflow:hidden;
  }


  #sensor_title{
    width:100%;
    height:20%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .sensor_box{
    height:100%;
    width: 50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#17cde9;

  }
  #sensor_list{
    width:100%;
    height:80%;
    color:#1ae0fe;
    overflow:hidden;

  }
  #sensor_list ul{
    padding: 0;
  }
  .inner-container{
    width: 100%;
    height: 100%;

  }
  .inner-container li{
    width:100%;
    height:20%;

  }
  .inner-container  li span{

    text-align: center;
    height: 100%;
    width: 50%;
  }

  #sensor_list li:nth-child(2n+1){
    background-color:#037687;
  }
  /*传感器文字滚懂*/

  .inner-container {
    animation: myMove 5s linear infinite;
    animation-fill-mode: forwards;
  }

  /*文字无缝滚动*/
  @keyframes myMove {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(-80%);
    }
  }

  /*vue*/
  .ant-drawer{
    color:red
  }
  /*定义盒子标题颜色*/
  .ant-drawer-title {

    color:#1883d1;
    font-size: 1.2rem;

  }

  /*定义tab标题下划线颜色*/
  .ant-tabs-nav-container {
    border-bottom:1px solid #06264d;

  }
  /*tab标题字体*/
  .ant-tabs .ant-tabs-small-bar .ant-tabs-tab {
    font-size: 1.0rem;
  }

  /*整个drawer的透明度*/
  .ant-drawer-content-wrapper{
    opacity: 0.9;
  }

  .ant-drawer-wrapper-body{
    background-color: #06264d;
  }
  /*定义箭头的颜色*/
  .ant-tabs-tab-prev.ant-tabs-tab-arrow-show, .ant-tabs-tab-next.ant-tabs-tab-arrow-show {
    color: #65c6e7;
  }
  /*定义X号的颜色*/
  .ant-drawer-close {
    color: #65c6e7;
  }





</style>